<!-- 商品详情 -->
<template>
    <div class="details">
        <div class="head">
            <div class="back" @tap="onClickLeft"></div>
        </div>

        <!-- 轮播图 -->
        <uni-swiper-dot
            :info="info"
            :current="current"
            field="content"
            :dotsStyles="dotsStyles"
            :mode="mode"
        >
            <swiper class="swiper-box" @change="change">
                <swiper-item v-for="(item ,index) in info" :key="index">
                    <view class="swiper-item">
                        <img :src="item.content" alt>
                    </view>
                </swiper-item>
            </swiper>
        </uni-swiper-dot>

        <div class="describe">
            <h2>商品名称商品名称商品名称商品名称商品名商品名称商品名称</h2>
            <div class="jifen">
                <span>
                    积分
                    <em>10000</em>
                </span>
            </div>
            <div class="flex">
                <div>产地：中国</div>
                <div>快递：￥0</div>
                <div>月销：999</div>
            </div>
        </div>

        <div class="line"></div>

        <div class="tag">
            <div>品质保证</div>
            <div>全场包邮</div>
            <div>超值好礼</div>
        </div>

        <div class="line"></div>
        <van-cell is-link title="商品规格" link-type="navigateTo" :border="false" url="123"/>

        <div class="more">
            <span>继续拖动查看详情</span>
            <p></p>
        </div>

        <button class="btnBy" @tap="show=true">立即购买</button>

        <van-popup :show="show" position="bottom" :overlay="true" @close="show=false">
            <div class="configure">
                <view>
                    <img :src="info[0].content" alt="">
                    <span>积分 <em>1000</em></span>
                    <p>库存：125</p>
                </view>
                <view>
                    <h2>商品规格</h2>
                    <div>
                        <span class="default">100ml</span>
                        <span class="active">200ml</span>
                        <span class="disabled">300ml</span>
                    </div>
                </view>
                <view>
                    <h2>购买数量</h2>
                    <uni-number-box class="number" :min="0" :max="9" @change="numberChange"></uni-number-box>
                </view>
                <button class="btnBy" @tap="nextStep">下一步</button>
            </div>
        </van-popup>
    </div>
</template>

<script>
import { uniSwiperDot } from "@/components/uni-swiper-dot/uni-swiper-dot.vue";
import uniNumberBox from "@/components/uni-number-box/uni-number-box.vue"
export default {
    components: { uniSwiperDot,uniNumberBox},
    data() {
        return {
            show:false,
            info: [
                {
                    content: require("@/static/rush/bg.png")
                },
                {
                    content: require("@/static/rush/bg.png")
                },
                {
                    content: require("@/static/rush/bg.png")
                }
            ],
            current: 0,
            mode: "default",
            dotsStyles: {
                backgroundColor: "rgba(255,255,255,0.3)",
                selectedBackgroundColor: "rgba(255,255,255,0.6)",
                border: "rgba(255,255,255,0)",
                selectedBorder: "rgba(255,255,255,0)"
            }
        };
    },
    mounted() {},
    methods: {
        onClickLeft() {
            uni.navigateBack();
        },
        change(e) {
            this.current = e.detail.current;
        },
        numberChange(e){
            console.log(e)
        },
        nextStep(){
            uni.navigateTo({
                url: 'confirm'
            });
        }
    }
};
</script>
<style lang='less' scoped>
.details {
    padding-bottom: 98upx;
}
.head {
    position: fixed;
    width: 100%;
    left: 0;
    top: 60upx;
    z-index: 99;
    .back {
        width: 66upx;
        height: 66upx;
        background: url("~@/static/icon/back.png");
        background-size: 100% 100%;
        margin-left: 30upx;
        float: left;
    }
}

.swiper-box {
    width: 750upx;
    height: 750upx;
    img {
        width: 750upx;
        height: 750upx;
    }
}

.describe {
    padding: 25upx;
    h2 {
        font-size: 32upx;
        color: #000;
        margin-bottom: 20upx;
    }
    .jifen {
        span {
            color: #ff242e;
            font-size: 20upx;
            em {
                font-style: normal;
                font-size: 56upx;
                display: inline;
                font-family: "DIN-Medium";
            }
        }
    }
    .flex {
        margin-top: 10upx;
        display: flex;
        justify-content: space-between;
        div {
            color: #acacac;
            font-size: 22upx;
        }
    }
}

.tag {
    display: flex;
    justify-content: space-between;
    line-height: 88upx;
    padding: 0 25upx;
    div {
        color: #acacac;
        font-size: 22upx;
        background: url("~@/static/icon/sure.png") no-repeat left center;
        background-size: 26upx 26upx;
        padding-left: 42upx;
    }
}
.more {
    background: #f5f5f5;
    height: 113upx;
    line-height: 113upx;
    text-align: center;
    position: relative;
    padding: 0 30upx;
    span {
        display: inline-block;
        background: #f5f5f5;
        padding: 0 10upx;
        font-size: 26upx;
        color: #acacac;
        position: relative;
        z-index: 2;
    }
    p {
        content: "000";
        border-bottom: 1upx solid #acacac;
        position: absolute;
        width: 750-60upx;
        top: 50%;
        left: 30upx;
        z-index: 0;
    }
}

.btnBy {
    background: rgb(255, 225, 66);
    width: 100%;
    height: 98upx;
    line-height: 98upx;
    color: #3c1e0d;
    font-size: 32upx;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    border-radius: 0;
}

.configure{
    padding: 25upx;
    >view{
        border-bottom: 1upx solid #ACACAC;
        width: 100%;
        display: inline-block;
        h2{
            color: #424242;
            font-size: 26upx;
            font-weight: normal;
            line-height: 75upx;
            padding: 0;
        }
    }
    >view:nth-child(1){
        padding-bottom: 25upx;
        img{
            float: left;
            width: 204upx;
            height: 204upx;
            margin-right: 40upx;
        }
        span{
            margin-top: 60upx;
            color: #FF242E;
            font-size: 26upx;
            display: inline-block;
            em{
                font-style: normal;
                font-size: 36upx;
                margin-left: 8upx;
                display: inline-block;
                padding: 0;
            }
        }
        p{
            color: #ACACAC;
            font-size: 22upx;
        }
    }
    >view:nth-child(2){
        padding-bottom: 25upx;
        span{
            width: 120upx;
            height: 56upx;
            line-height: 56upx;
            color: #000;
            font-size: 26upx;
            margin-right: 24upx;
            display: inline-block;
            text-align: center;
            &.default{
                background: rgb(233, 233, 233)
            }
            &.active{
                background: rgb(255, 225, 66)
            }
            &.disabled{
                background: rgb(233, 233, 233);
                color: #ACACAC;
            }
        }
    }
    >view:nth-child(3){
        margin-bottom: 250upx;
        h2{float: left;}
        .number{float: right; margin-top: 10upx;}
    }
}
</style>